CRAFTING DIGITAL EXPERIENCESBUILDING FOR HUMANSPIXEL-PERFECT PRECISIONSMOOTH ANIMATIONSINTERACTIVE BY DESIGNTURNING IDEAS INTO MOTION
CRAFTING DIGITAL EXPERIENCESBUILDING FOR HUMANSPIXEL-PERFECT PRECISIONSMOOTH ANIMATIONSINTERACTIVE BY DESIGNTURNING IDEAS INTO MOTION
DELIGHT IN EVERY CLICKDRIVEN BY UTILITYDESIGNED TO ENGAGENO BORING WEBSITESSCROLL-TRIGGERED WONDERSUSER-CENTRIC FRONT END
DELIGHT IN EVERY CLICKDRIVEN BY UTILITYDESIGNED TO ENGAGENO BORING WEBSITESSCROLL-TRIGGERED WONDERSUSER-CENTRIC FRONT END
SYS.HUD // ONLINE
[01 / 04]

Tech Stack & Capabilities

Bespoke interactive telemetry grid mapping active skill modules & core proficiencies.

ACTIVE MODULE: MOD_01
Languages & Core
Core Web Fundamentals & Scripting Languages
DIAGNOSTIC
100% WETNESS
STATE
LOADED & ACTIVE
MOD_01

Languages & Core

Core Web Fundamentals & Scripting Languages

CORE#JS

JavaScript

ESNext / Web APIs
CORE#TS

TypeScript

Strict Typing / Generics
SCRIPT#PY

Python

Automation / APIs
MARKUP#HTML_CSS

HTML5 & CSS3

Semantic / Animations
MOD_02

Frameworks & UI

Modern Application Frameworks & UI Systems

FRONTEND#REACT_NEXT

React.js & Next.js

App Router / SSR
ROUTING#TANSTACK

TanStack Start

Full-stack Routing
BACKEND#NEST

Nest.js

Enterprise Backend Architecture
STYLING#TAILWIND

Tailwind CSS

Utility-First Engine
COMPONENTS#SHADCN

Shadcn UI

Accessible Primitives
MOD_03

Motion & 3D WebGL

Interactive Animation Pipelines & Shader Graphics

ANIMATION#GSAP

GSAP

ScrollTrigger / Timelines
INTERACTIVE#FRAMER

Framer Motion

Gestures & Layout Shifts
WEBGL#R3F

React Three Fiber

Three.js / Custom Shaders
STATE#ZUSTAND

Zustand

Micro State Management
MOD_04

Backend & Infrastructure

Database Systems, Queues & Cloud Deployment

DATA#PRISMA_PG

Prisma & PostgreSQL

ORM & Relational DB
DEVOPS#DOCKER

Docker

Containerization
QUEUE#REDIS_BULLMQ

Redis & BullMQ

Caching & Async Queues
CLOUD#FIREBASE_VERCEL

Firebase & Vercel

Edge & Serverless
PIPELINE#GIT_ACTIONS

Git & GitHub Actions

VCS & CI/CD Workflows
Selected Work

Featured Projects

Crafted with Precision01 - 05
Dental Clinic Queue & Appointment System
Full-Stack
01

Dental Clinic Queue & Appointment System

Real-Time Healthcare Management

A high-performance real-time dental clinic ecosystem engineered for seamless patient queuing, background waitlist automation, and role-restricted multi-portal operations.

Real-time queue sync via WebSockets
Automated waitlist offer engine powered by Redis & BullMQ background jobs
Role-based multi-portal system (Admin, Receptionist, Doctor, Patient)
JWT token rotation & granular RBAC security
NestJSReactVitePrisma ORMPostgreSQLRedisBullMQWebSocketsTailwind CSS
GitHub
Order Management System
Full-Stack
02

Order Management System

Full-Stack E-Commerce & Operations

Enterprise-grade order processing and inventory analytics suite featuring stateful cart management, analytics visualization, and cloud asset processing.

Stateful cart & stock-adjusted order builder powered by Zustand
Recharts analytics dashboard for real-time inventory monitoring
Cloudinary asset pipelines for automated image optimization
Better Auth integration for secure role-based access control
Next.js 16PostgreSQLPrisma ORMZustandRechartsCloudinaryBetter AuthTailwind CSS v4
Live DemoGitHub
Telescope Clone
Creative Frontend
03

Telescope Clone

Immersive Creative Development Showcase

High-craft interactive WebGL/GSAP showcase exploring optical zoom masks, concentric shutter wipes, and smooth scroll tracking.

Optical zoom concentric mask scaling driven by scroll motion
SVG radial shutter wipes with dynamic path calculation
Responsive bounding-box tracking letter portals
Smooth scroll timeline binding with Lenis integration
React 19Tailwind CSS v4GSAPScrollTriggerDrawSVGLenis Scroll
Live DemoGitHub
Gamified 3D Map Navigation
3D & WebGL
04

Gamified 3D Map Navigation

Interactive Shaders & Terrain Engine

An immersive 3D interactive terrain experience utilizing custom GLSL displacement shaders and fluid blob dynamics.

Custom GLSL heightmap & displacement shaders for organic terrain deformation
Mouse-reactive fluid blob dynamics with real-time physics
Desktop compass & tactical grid UI overlay
Adaptive mobile performance rendering mode
React Three FiberThree.jsGSAPGLSL ShadersTailwind CSS
Live DemoGitHub
SECRET
3D & WebGL★ Featured
05

Anonymous Project

Stealth Mode / Confidential

A highly confidential stealth project currently under active development. Details are classified until official release.

Proprietary real-time design system
End-to-end encrypted architecture
Stealth-mode custom canvas integration
Classified hardware-accelerated pipeline
GSAPReact Three FiberWebGLTailwind CSS
🔒 Access Restricted
01 / 05
CAREER & MILESTONES

EXPERIENCE & HISTORY

A comprehensive record of professional engineering roles, research contributions, freelance client engagements, and official certifications.

Certification85 Overall Score
Nov 2024

TOEFL iBT Certification

Certified Professional @ ETS

  • Achieved an overall score of 85 (Reading: 20, Listening: 25, Speaking: 21, Writing: 19).
  • Demonstrates advanced technical communication and fluent professional English collaboration skills.
#English Proficiency#Technical Communication#Professional Writing#Verbal Communication
View Certificate
Freelance
Jun 2024 – Sep 2024

Faiq — Educational Platform

Front-end Developer @ Faiq EdTech

  • Developed responsive UI components using HTML5 & Tailwind CSS for a high-performance dynamic learning platform.
  • Engineered interactive PDF viewing cards and video lesson modules with integrated real-time student chat functionality.
  • Collaborated closely with designers to achieve pixel-perfect responsiveness and accessibility across mobile and desktop devices.
#React#HTML5#Tailwind CSS#UI/UX Design#Interactive PDF/Video
Visit platform
Freelance+30% Load Speed & Reusability
Mar 2024 – Jun 2024

Sahl — Real-Estate Advertising Platform

Full-stack Next.js Developer @ Sahl

  • Architected and built full-stack features using Next.js, TypeScript, Tailwind CSS, and Drizzle ORM.
  • Implemented secure user authentication, multi-factor flows, and password recovery using Nodemailer and Lucia Auth.
  • Integrated reusable modular UI component systems with ShadCN UI, improving component reusability and boosting overall page load speed by 30%.
#Next.js#TypeScript#Drizzle ORM#Lucia Auth#ShadCN UI#Tailwind CSS#Nodemailer
Academic
Sep 2023 – Dec 2023

Taiz University

Assistant Lecturer @ Department of Computer Engineering

  • Delivered structured, hands-on academic lectures and practical lab sessions on Artificial Neural Networks (ANN) and Database Management Systems (DBMS).
  • Mentored computer engineering undergraduates through complex lab assignments and evaluated final capstone software engineering projects.
  • Fostered technical problem-solving, algorithm optimization, and clean architectural design patterns among senior students.
#Artificial Neural Networks#DBMS#Public Speaking#Curriculum Design#Academic Mentorship
ResearchIEEE Xplore Published
Aug 2023

eSMARTA 2023 International Conference

Researcher & Conference Speaker @ IEEE Xplore

  • Authored and presented original peer-reviewed research paper titled: "Business Intelligence Model for Customer Targeting Using Fuzzy-C-Means and FP-Growth".
  • Formulated an advanced hybrid clustering and association rule mining model for predictive customer analytics.
  • Published in official IEEE Xplore conference proceedings.
#Machine Learning#Data Mining#Fuzzy-C-Means#FP-Growth#Research & Analytics#IEEE Publication
IEEE Xplore Publication
Available for new opportunities

LET'SWORKTOGETHER

Have a project in mind or want to collaborate? Feel free to drop a message or reach out via social media.

Connect & Follow

GitHub
LinkedIn
Email
SAY HELLOOPEN FOR OPPORTUNITIESLET'S BUILD SOMETHING GREATGET IN TOUCH
SAY HELLOOPEN FOR OPPORTUNITIESLET'S BUILD SOMETHING GREATGET IN TOUCH